<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/product">产品</a></li>
        <li><a href="#/server">服务</a></li>
    </ul>
    <div id="result"></div>
    <script>
        //上面代码中路由系统Router对象实现，主要提供三个方法：

        // init 监听浏览器 url hash 更新事件。

        // route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。

        // refresh 执行当前url对应的回调函数，更新页面。

        // Router调用方式如下：点击触发 url 的 hash 改变，并对应地更新内容，运行后你会发现每次点击菜单时，#result中会变换背景色和内容。
        function Router() {
            this.routes = {};
            this.curUrl = '';

            this.route = function(path, callback) {
                this.routes[path] = callback || function() {};
                console.log(this.routes);
                //  {/: ƒ, /product: ƒ, /server: ƒ} 每个路由对应一个f
            };

            this.refresh = function() {
                this.curUrl = location.hash.slice(1) || '/'; //"/product"
                this.routes[this.curUrl]();
            };

            this.init = function() {
                window.addEventListener('load', this.refresh.bind(this), false);
                window.addEventListener('hashchange', this.refresh.bind(this), false);
            }
        }
        var R = new Router();
        R.init();
        var res = document.getElementById('result');

        R.route('/', function() {
            res.style.background = 'blue';
            res.innerHTML = '这是首页';
        });
        R.route('/product', function() {
            res.style.background = 'orange';
            res.innerHTML = '这是产品页';
        });
        R.route('/server', function() {
            res.style.background = 'skyblue';
            res.innerHTML = '这是服务页';
        });
    </script>
</body>

</html>